import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// import { ref, onMounted, onBeforeUnmount } from 'vue'
export function lazyLoad (api) {
  const list = ref([])
  const target = ref(null) // 响应式数据，需要暴露出去
  // stop接收的是回调函数，调用停止监听是否进入可视区域
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 判断是否进入可视区域
      if (isIntersecting) {
        // 先停止监听
        stop()
        // 调用接口
        api().then(res => {
          // 调取接口获取的值赋值给list数组
          list.value = res.result
        })
      }
    },
    { threshold: 0 }
  )
  //   暴露出去
  return { list, target }

  //   原生方法
  //   const target = ref(null)
  //     function myIntersectionObserver (target, callback, option) {
  //       const ob = new IntersectionObserver(callback, option)
  //       onMounted(() => {
  // 启动
  //         ob.observe(target.value)
  //       })
  //       onBeforeUnmount(() => {
  //         stop()
  //       })
  //       function stop () {
  // 停止
  //         ob.unobserve(target.value)
  //       }
  //       return { stop }
  //     }
  // const { stop } = myIntersectionObserver(
  //     target,
  //     ([{ isIntersecting }]) => {
  //       if (isIntersecting) {
  //         console.log('显示')
  //         stop()
  //       }
  //     },
  //     { threshold: 0 }
  //   )
  //   function btnClick () {
  //     stop()
  //   }
  //   return { target, btnClick }
}
